<template>
	<div id="myapp">
        <div class="api_leftmenu">
        	<ul class="ivu-menu ivu-menu-light ivu-menu-vertical">
        		<li v-for="(item,index) in menuData" 
        		:class="['ivu-menu-item',{'ivu-menu-item-active ivu-menu-item-selected':menuindex==index}]" 
        		>
        			<div class="menu_li">
	        			<div class="links" @click="openmenu(index)">
	        				<p class="menuname">{{item.menuname}}</p>
	        				<p class="weburl">{{item.weburl}}</p>
	        			</div>
	        			<div class="toolbar">
	        				<Icon type="ios-create-outline" @click="editApi(index)" />
	        				<Icon type="ios-trash-outline" />
	        			</div>
        			</div>
        		</li>                    		
        	</ul>
        </div>
		<Modal
		v-model="modalapiname"
		title="修改接口"
		>
		    <Form :model="formItems" ref="formValidate" :rules="ruleValidate" label-position="top">
		        <FormItem label="名称：" prop="apiname">
		            <Input v-model="formItems.apiname"></Input>
		        </FormItem>
		        <FormItem label="地址：" prop="apiurl">
		            <Input v-model="formItems.apiurl"></Input>
		        </FormItem>
		        <FormItem label="类型：" prop="apimethods">
		            <Select v-model="formItems.apimethods" style="width:200px">
				        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
		        </FormItem>
		        <FormItem label="状态码：" prop="apistatus">
		            <Select v-model="formItems.apistatus" style="width:200px">
				        <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
		        </FormItem>
		        <FormItem label="简介：">
		            <Input v-model="formItems.apintroduce"></Input>
		        </FormItem>		        
		    </Form>
		    <div slot="footer">
	            <Button type="text" size="large" @click="modalapiname=false">取消</Button>
	            <Button type="primary" size="large" @click="saveApiname">保存</Button>
	        </div>
		</Modal>
	</div>
</template>
<style type="text/css" scoped>
.menu_li{
	display: flex;
	-webkit-display:flex;
}
.menuname{
	color: #2d8cf0;
}
.weburl{
	color: #aaa; 
	font-size: 12px;
}
.links{
	width: 120px;
}
</style>
<script type="text/javascript">
	import { mapState, mapActions } from 'vuex'
	export default {
		name:'LeftMenu',
		props:['menuindex'],
		data(){
			return {
		        menuData:[{
		        	menuname:'用户注册',
		        	weburl:'/api/user/register'
		        },{
		        	menuname:'用户删除',
		        	weburl:'/api/user/register'
		        },{
		        	menuname:'用户修改',
		        	weburl:'/api/user/edit'
		        },{
		        	menuname:'访问量最高的栏目',
		        	weburl:'/api/generate/?name=hot_column'
		        },{
		        	menuname:'最热门关键词',
		        	weburl:'/api/generate/keyword'
		        },{
		        	menuname:'成本最高的前10个部门',
		        	weburl:'/api/generate/?name=top_department'
		        },{
		        	menuname:'获取部门列表',
		        	weburl:'/api/department/departList'
		        }],
		        modalapiname:false,
		        formItems:{
		        	apiname:'',
		        	apiurl:'',
		        	apimethods:'POST',		        	
		        	apistatus:200,
		        	apintroduce:'',
		        },
		        typeList:[{
	                value: 'GET',
	                label: 'GET'
                },{
	                value: 'POST',
	                label: 'POST'
                },{
	                value: 'PUT',
	                label: 'PUT'
                },{
	                value: 'DELETE',
	                label: 'DELETE'
                },{
	                value: 'OPTIONS',
	                label: 'OPTIONS'
                },{
	                value: 'PATCH',
	                label: 'PATCH'
                },{
	                value: 'HEAD',
	                label: 'HEAD'
                }],
                statusList:[{
                	value:200,
                	label:200
                },{
                	value:301,
                	label:301
                },{
                	value:403,
                	label:403
                },{
                	value:404,
                	label:404
                },{
                	value:500,
                	label:500
                },{
                	value:502,
                	label:502
                },{
                	value:503,
                	label:503
                },{
                	value:504,
                	label:504
                }],
                ruleValidate:{
                	apiname: [
                        { required: true, message: '接口名称不能为空', trigger: 'blur' }
                    ],
                    apiurl: [
                        { required: true, message: '接口地址不能为空', trigger: 'blur' }
                    ]
                }
	        }
		},
		mounted(){

		},
		methods:{
        	openmenu(index){//打开左侧菜单
        		console.log(index,'menu-index',this.menuData[index]);
        	},
        	editApiname(index){//编辑接口名称
        		this.modalapiname=true;
        		console.log(index,'editApiname-index',this.menuData[index]);
        	},
        	saveApiname(){//保存接口名称
        		var _this = this;
        		_this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                        _this.$Message.success('Success!');
                        _this.modalapiname=false;
                        console.log(_this.formItems,'保存接口名称')
                    }
                })        		
        	},
        	editApi(index){//编辑接口
        		console.log(index,'editApi-index',this.menuData[index]);
        	},
        	saveApi(){//保存接口

        	}
		}
	}
</script>